<template>

	<!-- :style="{paddingTop: systemBarHeight + 'px'}" -->
	<view>
		<spopVue @open="topen" @close="tclose" :title="popType==0?'服务设置':getNoticeOut.title" v-show="getNoticeOut"
			:key="getNoticeOut.title" :handleClose="()=>{}" dir='center' :handleOpen="()=>{}" ref="spop">]

			<template v-slot:test>


				<!-- <u-subsection :list="list" mode="button"  :current="curNow" @change="sectionChange" ></u-subsection> -->
				<view v-if="popType==0" class="popinfo"
					style="width: 100%;display: flex; flex-direction: column; justify-content: center;align-items: center; font-size: 1.7vw!important;box-sizing: border-box;">
					<div style="display: flex;width: 100%;box-sizing: border-box;">
						<div @click="chooseTag(i)" :style="{
					color:i==curNow?'#46cfff':'#000'
				}" style="flex:1;display: flex;justify-content: center;" v-for="(e,i) in list">
							{{e}}
						</div>
					</div>
					<!-- <view style="color: #000;margin-bottom: 2%;">服务设置</view> -->

					<view style="width: 100%;display: flex;justify-content: center;margin-top: 20px;"
						v-show='curNow==0'>
						<u--form style="width: 80%;height: 280px;" labelPosition="top" :model="config"
							labelWidth="10vw">
							<u-form-item label="IP" borderBottom>
								<u-input v-model="config.ip" border="none"></u-input>
							</u-form-item>
							<u-form-item label="端口" borderBottom>
								<u-input v-model="config.port" border="none"></u-input>
							</u-form-item>
							<u-form-item>
								<u-button type="primary" @click='set' style="margin-top: 2vw;" text="保存"></u-button>
							</u-form-item>
						</u--form>
					</view>
					<view
						style="width: 100%;height: 220px;margin-top: 20px; display: flex;flex-direction: column;justify-content: space-around;"
						v-show='curNow==1'>
						<view><text style="font-weight: bold;">设备型号</text>:{{systemInfo.model}}</view>
						<view><text style="font-weight: bold;">设备平台</text>:{{systemInfo.platform}}</view>
						<view><text
								style="font-weight: bold;">设备尺寸</text>:{{systemInfo.windowWidth}}*{{systemInfo.windowHeight}}
						</view>
						<view></view>
					</view>
					<view
						style="width: 100%;height: 220px;margin-top: 20px; display: flex;flex-direction: column;justify-content: space-around;"
						v-show='curNow==2'>
						<view><text style="font-weight: bold;">当前版本</text>:V1.1.2</view>
						<view></view>
						<view></view>
						<view></view>
					</view>

					<view
						style="width: 100%;height: 220px;margin-top:20px;box-sizing: border-box; display: flex;flex-direction: column;justify-content: space-around;"
						v-show='curNow==3'>
						<view> {{title}}</view>
						<view><text style="font-weight: bold;">主办单位</text>: {{comName}}</view>
						<view><text style="font-weight: bold;">技术支持</text>:上海利章信息科技有限公司</view>
						<view style="font-size: 16px;color: #cccccc;">©2020-2025上海泽典信息科技有限公司</view>
					</view>

				</view>
				<view v-if="popType==1"
					style="width: 100%;max-height: 60vh;min-height:70vh;  display: flex;flex-direction: column;  font-size: 1.7vw!important;box-sizing: border-box;position: relative;">
					<scroll-view scroll-y="true" scroll-with-animation="true" :style="{
						height:`calc(100% - ${eHeight+4}px)`
					}" style="width:100%;position: absolute;top: 0;">
						<view v-html="getNoticeOut.ContentText"
							style="width: 100%;box-sizing: border-box;padding-bottom: 1vh;">

						</view>
					</scroll-view>
					<u-button class="tt" type="primary" style="position: absolute;bottom: 0;"
						@click="handleReadConfirm()" text="我已阅读并同意以上须知"></u-button>
				</view>

			</template>
		</spopVue>
		<!-- <u-keyboard @close="handleKeyClose" :dotDisabled="true"   :tooltip="false" :overlay="true"  closeOnClickOverlay safeAreaInsetBottom mode="card" @change="valChange"  @backspace="backspace" :show="show"></u-keyboard> -->
		<num-keyboard :show="show" @keypress="handleKeyboardInput" @close="handleKeyClose"></num-keyboard>
		<view style="width: 100%;height: 100%;display: flex;align-items: center;">

			<view class="main" style="position: relative;">
				<view class="current-time">当前时间:{{currentTime}}</view>
				<view class="current-time1">
					{{comName}}
				</view>
				<view class="right t"
					style="width: 100%;display: flex; flex-direction: column; justify-content: center;align-items: center;">

					<view
						style="width: 60vw;height:100%;box-sizing: border-box;  display: flex; align-items: center;justify-content: center;padding: 4vw 40px;">
						<view @click="testSpeak"
							style="width: 60vw;max-height:90vh;min-height:60vh;border-radius: 8rpx 40rpx 8rpx 40rpx;border:2px solid transparent;box-sizing: border-box;padding: 10px 20px; display: flex;flex-direction: column; align-items: center;justify-content: center;">
							<view style="color: #fff;margin-bottom: 40rpx;font-size: 36rpx;font-weight: bolder;">{{title}}</view>
							<view style="width: 80%;">
								<u--form labelPosition="top" style="width: 100%;" labelWidth="160rpx" :model="loginInfo"
									:rules="rules" ref="uForm">
									<!-- 	<u-form-item  label="测试" borderBottom>
										<u--input   v-model="loginInfo.test" @input="debouncedTinput"  type="text" border="none"></u--input>
									</u-form-item> -->
									<u-form-item label="用户名" prop="username" borderBottom>
										<u--input v-model="loginInfo.username" @focus="handleAfocus" type="text"
											border="none"></u--input>
									</u-form-item>
									<u-form-item label="密码" prop="password" borderBottom>
										<u-input v-model="loginInfo.password" @focus="handleBfocus"
											:type="isPass?'text':'password'" border="none">
											<template slot="suffix">
												<!-- 																		<u-icon :name="isPass?'eye-off':'eye-fill'" @click="isPass=!isPass" color="#fff" size="22"></u-icon> -->
												<image :src="isPass?'../../static/yc.png':'../../static/xs.png'"
													@click="isPass=!isPass" style="width: 24px;height: 24px;" mode="">
												</image>
											</template>

										</u-input>
									</u-form-item>
									<u-form-item style="margin-top:1vw">
										<u-button @click="handleSubmit" type="primary"
											style="background: #FF9900;font-size: 22px;" text="立即登录"></u-button>
									</u-form-item>
									<u-form-item>
										<u-button @click="handlePop(1)" type="primary" style="background: #00CED1"
											text="考试须知"></u-button>
									</u-form-item>
								</u--form>
							</view>
						</view>
					</view>

					<view @click="handlePop(0)"
						style="cursor: pointer; display: flex;flex-direction: column;align-items: center;position: absolute;top: 3vw;right: 5vw;">
						<!-- <u-icon name="setting-fill" color="#fff" size="30"></u-icon> -->
						<image src="../../static/setting.png" style="width: 48px;height: 48px;" mode=""></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapMutations,
		mapActions
	} from 'vuex';
	import {
		mixins
	} from "../../mixins/app.js";
	import yc from "../../static/yc.png"
	import xs from "../../static/xs.png"
	import dayjs from 'dayjs';
	import spopVue from '../../components/spop.vue';
	// import config from '@/static/config.js';
	import {
		ExamineeLogin,
		GetExamNoticeByExamineeOut,
		getCompanyName
	} from "../../api/api.js"
	import {
		debounce
	} from "../../utils/common.js"
	import NumKeyboard from '../../components/nk.vue'
	// #ifdef APP-PLUS

	const TTSSpeaker = uni.requireNativePlugin('AiDrive-TTSSpeaker');
	// #endif

	// import {GetExamNoticeByExaminee} from "../../api/api.js"
	export default {
		computed: {
			...mapGetters('app', ['getNoticeOut'])
		},
		components: {
			spopVue,
			NumKeyboard
		},
		mixins: [mixins],

		data() {
			return {

				config: {
					ip: "",
					port: "",
				},
				currentTime: dayjs().format('YYYY年MM月DD日 HH时mm分ss秒'),
				loginInfo: {
					username: '',
					password: ''
				},
				isPass: false,
				list: ['连接设置', '设备信息', '版本信息', '参数'],
				curNow: 0,
				comName: "",
				inputHistory: [],
				eHeight: 0,
				popType: 0,
				value: '',
				title: "",
				show: false,
				timer: null,
				inputType: 0,
				systemInfo: {},
				rules: {
					'username': {
						type: 'string',
						required: true,
						message: '请输入用户名',
						trigger: ['blur', 'change']
					},
					'password': {
						type: 'string',
						required: true,
						message: '请输入密码',
						trigger: ['blur', 'change']
					},
				},
			}
		},

		onLoad() {
			var that = this
			uni.getSystemInfo({
				success(res) {
					that.systemInfo = res
				}
			});

		},
		created() {

			// this.debouncedTinput = debounce(this.tinput, 1000);
		},
		mounted() {
			this.countTime()
			this.AgetnoticeOut()
			this.init()
			this.config = uni.getStorageSync('config') || {
				ip: "",
				port: ""
			}

		},
		onShow() {
			// this.timer = setInterval(function() {
			// 	uni.hideKeyboard(); //隐藏软键盘  
			// }, 10);
		},
		onHide() {
			clearInterval(this.timer)
			this.timer = null
		},
		methods: {
			...mapActions('app', {
				AgetnoticeOut: 'AgetnoticeOut'
			}),
			testSpeak() {
				// TTSSpeaker.speak('测试语音播报', 0);
			},
			chooseTag(i) {
				this.curNow = i
			},
			sectionChange(val) {
				console.log(val)
				this.curNow = val
			},
			handleKeyboardInput(val) {
				if (val === '删除') {
					// 删除value的最后一个字符
					if (this.value.length) this.value = this.value.substr(0, this.value.length - 1);

					if (this.inputType == 0) {
						if (this.loginInfo.username.length) this.loginInfo.username = this.loginInfo.username.substr(0,
							this.loginInfo.username.length - 1);
						this.$refs.uForm.validateField('username')
					} else {
						if (this.loginInfo.password.length) this.loginInfo.password = this.loginInfo.password.substr(0,
							this.loginInfo.password.length - 1);
						this.$refs.uForm.validateField('password')
					}

					// 处理退格逻辑
				} else {
					// 记录当前时间
					const now = Date.now();
					const TIME = 1000
					// 获取历史输入时间记录
					const historyTimes = this.inputHistory || [];
					// 过滤掉1秒前的记录
					const recentTimes = historyTimes.filter(time => now - time < TIME);

					// 检查是否超出频率限制
					if (recentTimes.length >= 5) {
						uni.showToast({
							title: '输入过快，请稍后再试',
							icon: 'none'
						});
						return;
					}

					// 更新输入历史记录
					this.inputHistory = [...recentTimes, now];

					// 原有逻辑
					this.value += val;
					if (this.inputType == 0) {
						this.loginInfo.username += val;
						this.$refs.uForm.validateField('username');
					} else {
						this.loginInfo.password += val;
						this.$refs.uForm.validateField('password');
					}
					// 处理数字输入
				}
			},
			handleAfocus() {
				// uni.hideKeyboard();//隐藏软键盘  
				this.show = true
				uni.hideKeyboard(); //隐藏软键盘  
				this.inputType = 0
			},
			handleKeyClose() {
				this.value = ""
				uni.hideKeyboard(); //隐藏软键盘  
				this.show = false
			},
			handleBfocus() {
				// this.timer=	setInterval(function(){
				// uni.hideKeyboard();//隐藏软键盘  
				// 	},40);  
				// uni.hideKeyboard();//隐藏软键盘  
				this.show = true
				uni.hideKeyboard(); //隐藏软键盘  
				this.inputType = 1
			},
			valChange(val) {
				// 记录当前时间
				const now = Date.now();
				const TIME = 1000
				// 获取历史输入时间记录
				const historyTimes = this.inputHistory || [];
				// 过滤掉1秒前的记录
				const recentTimes = historyTimes.filter(time => now - time < TIME);

				// 检查是否超出频率限制
				if (recentTimes.length >= 3) {
					uni.showToast({
						title: '输入过快，请稍后再试',
						icon: 'none'
					});
					return;
				}

				// 更新输入历史记录
				this.inputHistory = [...recentTimes, now];

				// 原有逻辑
				this.value += val;
				if (this.inputType == 0) {
					this.loginInfo.username += val;
					this.$refs.uForm.validateField('username');
				} else {
					this.loginInfo.password += val;
					this.$refs.uForm.validateField('password');
				}
			},
			// 退格键被点击
			backspace() {
				// 删除value的最后一个字符
				if (this.value.length) this.value = this.value.substr(0, this.value.length - 1);

				if (this.inputType == 0) {
					if (this.loginInfo.username.length) this.loginInfo.username = this.loginInfo.username.substr(0, this
						.loginInfo.username.length - 1);
					this.$refs.uForm.validateField('username')
				} else {
					if (this.loginInfo.password.length) this.loginInfo.password = this.loginInfo.password.substr(0, this
						.loginInfo.password.length - 1);
					this.$refs.uForm.validateField('password')
				}


			},
			init() {
				getCompanyName().then(res => {
					this.comName = res.Data.Sponsor
					this.title = res.Data.Type
				})
				// #ifdef APP-PLUS
				if (TTSSpeaker) {
					TTSSpeaker.init('');
				} else {
					console.log('初始化失败')
				}
				// #endif


			},
			async handleSubmit() {
				this.$refs.uForm.validate().then(async () => {
					try {
						await ExamineeLogin({
							userName: this.loginInfo.username,
							password: this.loginInfo.password
						}).then(res => {
							this.$Router.push('/pages/userinfo/userinfo')
							uni.setStorageSync('token', res.Data)
							uni.showToast({
								title: '登录成功',
								icon: 'none'
							})
						})
					} catch (e) {
						uni.showToast({
							title: e.Msg || '接口连接失败,请检查ip地址是否正确',
							icon: 'none'
						});
						//TODO handle the exception
					}
				}).catch(err => {
					console.log(err, 'err')
					uni.showToast({
						title: err[0].message,
						icon: 'none'
					});
				})




			},
			countTime() {
				setInterval(() => {
					this.currentTime = dayjs().format('YYYY年MM月DD日 HH时mm分ss秒')
				}, 1000)

			},
			handlePop(type) {


				if (type == 0) {
					clearInterval(this.timer)
					this.timer = null
					// uni.showToast({
					// 	title:''
					// })
				}
				
				this.popType = type
				this.$refs.spop.publicHandleShow(true)
				this.$nextTick(() => {
					uni.createSelectorQuery().select('.tt').boundingClientRect(data => {
						this.eHeight = data?.height
					}).exec();
				})

			},
			handleReadConfirm() {
				this.$refs.spop.publicHandleShow(false)

			},
			set() {
				uni.setStorageSync('config', this.config)
				uni.showToast({
					title: '保存成功',
					icon: 'none'
				})
				this.$refs.spop.publicHandleShow(false)
				this.AgetnoticeOut()
				this.init()
			},
			gohome() {
				this.$Router.push('/pages/userinfo/userinfo')
			},

			topen() {
				clearInterval(this.timer)
				this.timer = null
			},
			tclose() {
				this.timer = setInterval(function() {
					uni.hideKeyboard(); //隐藏软键盘  
				}, 40);
			},
			// 获取系统栏高度
			// getSysteminfo() {
			// 	var that=this
			// 	uni.getSystemInfo({
			// 		success: res => {
			// 			// that.systemBarHeight=res.statusBarHeight
			// 			that.setSbHeight(res.statusBarHeight);
			// 		}
			// 	});
			// }
		}
	}
</script>

<style lang="scss">
	.main {
		width: 100vw;
		height: 100vh;
		display: flex;
		box-sizing: border-box;

	}



	.t {
		background: url("../../static/loginbg.png") no-repeat;
		background-size: 100% 100%;
	}

	// @function upx2vw($upx) {
	//     @return ($upx / 750) * 100vw;
	// }

	::v-deep .u-icon__icon {
		font-size: 2vw;
	}


	.current-time {
		position: absolute;
		right: 1vw;
		bottom: 0.5vw;
		color: #fff;
		font-size: 1.5vw;
		/* 使用相对单位 */
	}

	.current-time1 {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: 10.5vh;
		color: #fff;
		font-weight: bolder;
		font-size: 20px;
		font-weight: bolder;
		/* 使用相对单位 */
	}

	::v-deep .u-button__text {
		font-size: 20px !important;
	}

	::v-deep .u-form-item__body__left__content__label {
		color: #fff !important;
		font-size: 22px !important;
	}

	::v-deep .uni-input-input {
		color: #fff !important;
		font-size: 20px !important;
	}

	::v-deep .popinfo .uni-input-input {
		color: #000 !important;
		font-size: 2vw
	}

	::v-deep .popinfo .u-form-item__body__left__content__label {
		color: #000 !important;
		font-size: 2vw
	}
</style>